<template>
	<view class="container">
		<navbar title="商品详情" :background="background" :color='color' :headType="1">
			<view class="goods-nav-wrap">
				<view class="goods-back line-center" @tap='backPage' v-if='showBack'>
					<uni-icons type='back' size="24" color="#333"></uni-icons>
				</view>
				<view class="goods-back line-center" @tap='toHome' v-else>
					<uni-icons type='home' size="24" color="#333"></uni-icons>
				</view>
				<view class="nav-title" :style="{color:color}">商品详情</view>
			</view>
		</navbar>
		<view class="center-tab-con" v-if='isSticky'>
			<view class="center-tab sticky-active" :style="{top:headAllHeight+'px'}">
				<view class="center-tab-item" :class="[navTabActiveIndex == index ? 'center-tab-item-act':'']"
					v-for='(item,index) in tabList' :key="index" @tap='changeActiIndex(index)'>{{item}}
				</view>
			</view>
		</view>
		<!-- 相交区域 -->
		<view class='fixedModule' :style="{top:fixedMoudleH +'px'}"></view>
		<view class="top-blank" v-if='isSticky'></view>
		<view class="main-con">
			<scroll-view class="main" scroll-y="true" scroll-with-animation @scroll='bindPageScroll'
				:scroll-into-view="scrollViewId" refresher-background='#F2F4F7'
				:refresher-triggered='refresherTriggered' refresher-enabled='true'
				@refresherrefresh='bindPullDownRefresh'>
				<view class="loading-page" v-if='loadingPage'>
					<load-page></load-page>
				</view>
				<view class="wrap" v-else>
					<!-- 轮播图 :style="{height:swiperHeight+'px'}"-->
					<view class="swiper-main">
						<view class="swiper-wrap">
							<swiper class="swiper-con" autoplay='true' interval='6000' circular="true"
								@change="swipeBanner" :current='swiperIndex'>
								<swiper-item v-for='(item,index) in goodsDetail.images'>
									<view class="img">
										<base-img :src='item' mode='aspectFit'></base-img>
									</view>
								</swiper-item>
							</swiper>
							<view class="swiper-dots line-center">
								{{swiperIndex+1}}/{{goodsDetail.images.length}}
							</view>
						</view>
					</view>
					<!-- 商品价格和名称 -->
					<view class="base-wrap goods-info">
						<view class="goods-price-wrap">
							<view class="goods-price">
								<text>￥</text>
								{{goodsDetail.priceObj.intPrice}}
								<text>{{goodsDetail.priceObj.floatPrice}}</text>
								<text class="goods-unit" v-if='goodsDetail.spec_type == 10'>/{{goodsDetail.goods_unit}}</text>
							</view>
							<view class="goods-price-line">
								<text>￥</text>{{goodsDetail.market_price_min ? goodsDetail.market_price_min : '0.00'}}
								<text v-if='goodsDetail.spec_type == 10' style='font-size: 20rpx;'>/{{goodsDetail.goods_unit}}</text>
							</view>
						</view>
						<view class="goods-name-wrap">
							{{goodsDetail.goods_name ? goodsDetail.goods_name : '暂无'}}
						</view>
					</view>
					<!-- 商品设置 -->
					<view class="goods-set-img">
						<view class="goods-set-con">
							<view class="share-icon">
								<image src='../static/share.png'></image>
							</view>
							<view class="text">分享商品 邀请好友一起享买</view>
							<view class="share line-center" @tap='toShare'>立即分享</view>
						</view>
					</view>
					<view class="base-wrap goods-set">
						<view class="goods-set-item line-v-center" @tap="onShowSkuPopup()">
							<label>选择</label>
							<view class="goods-set-item-right">
								请选择规格
							</view>
							<uni-icons type='forward' color="#BBBBBB"></uni-icons>
						</view>
						<view class="goods-set-item line-v-center">
							<label>运费</label>
							<view class="goods-set-item-right">
								免运费
							</view>
						</view>
						<view class="goods-set-item line-v-center">
							<label>服务</label>
							<view class="goods-set-item-right">
								送货上门｜品质保证
							</view>
						</view>
						<view class="goods-set-item line-v-center">
							<label>产地</label>
							<view class="goods-set-item-right">
								{{goodsDetail.producer ? goodsDetail.producer : '暂无'}}
							</view>
						</view>
					</view>
					<!-- 中部tab -->
					<view class="center-tab-con" v-if='!isSticky'>
						<view class="center-tab">
							<view class="center-tab-item"
								:class="[navTabActiveIndex == index ? 'center-tab-item-act':'']"
								v-for='(item,index) in tabList' :key="index" @tap='changeActiIndex(index)'>{{item}}
							</view>
						</view>
					</view>
					<!-- 评价 -->
					<view class="comment-wrap base-wrap" id='module0'>
						<view class="comment-title" @tap='toCommentDetail'>
							<template v-if='goodsDetail.countCommentNum > 0'>
								<view class="comment-title-left">评价({{goodsDetail.countCommentNum}})</view>
								<view class="comment-all">全部评价<uni-icons color="#7D7E80" type='right'
										size="12"></uni-icons></view>
							</template>
							<template v-else>
								<view class="comment-title-left">评价<text>暂无评价</text>
								</view>
								<view class="comment-all"><uni-icons color="#7D7E80" type='right' size="12"></uni-icons>
								</view>
							</template>

						</view>
						<view class="comment-con" v-if='goodsDetail.countCommentNum > 0'>
							<comment-item :item='goodsDetail.commentList'></comment-item>
						</view>
					</view>
					<!-- 详情 -->
					<view class="goods-detail" id='module1'>
						<view class="base-title">详情</view>
						<view class="uv-content">
							<uv-parse :content="goodsDetail.content ? goodsDetail.content:'暂无'"></uv-parse>
						</view>
					</view>
					<!-- 关联商品 -->
					<view class="relation-goods-wrap base-wrap" id='module2' v-if='goodsDetail.rel_goods_id'>
						<view class="base-title">关联商品</view>
						<view class="base-goods-wrap">
							<view class="base-goods-item" v-for="(item,index) in goodsDetail.rel_good_arr"
								@tap='toGoodsDetail(item.goods_id)'>
								<small-goods-item :pageType='1' :Authorization='Authorization' :item='item'
									@addCart='addCartSkuModal'></small-goods-item>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer-wrap">
			<view class="footer">
				<view class="handle-btn" @tap='toHome'>
					<view class="handle-icon">
						<image src='../static/home.png'></image>
					</view>
					<view class="handle-text">首页</view>
				</view>
				<view class="handle-btn" @tap='toCollect'>
					<view class="handle-icon">
						<image
							:src='goodsDetail.collect_flag == 0 ? "../static/shoucang.png":"../static/shoucanged.png"'>
						</image>
					</view>
					<view class="handle-text">{{goodsDetail.collect_flag == 0 ? '收藏':'已收藏'}}</view>
				</view>
				<view class="handle-btn" @tap='toCart'>
					<view class="handle-icon">
						<image src='../static/cart2.png'></image>
					</view>
					<view class="handle-text">购物车</view>
				</view>
				<view class="btn-con">
					<button class="btn add-cart line-center" @tap="onShowSkuPopup()">加入购物车</button>
					<button class="btn buy line-center" @tap="onShowSkuPopup()">立即购买</button>
					<!-- <button class="add-cart line-center add-cart-disabled" v-if='goodsDetail.stock_total == 0'>加入购物车</button>
				<button class="add-cart line-center add-cart-disabled" v-else-if='goodsDetail.stock_total < goodsDetail.minimum'>加入购物车</button>
				<button class="add-cart line-center" @tap="onShowSkuPopup()" v-else>加入购物车</button> -->
				</view>
			</view>
		</view>
		<view class="poster-modal" :class="[showModal ? 'modal-show':'']"></view>
		<view v-if='showCouponModal'>
			<new-gift :zoomCouponClass='zoomCouponClass' :couponInfo='couponInfo' @closeCouponModal='closeCouponModal'></new-gift>
		</view>
		<!-- 商品SKU弹窗 -->
		<sku-modal :skuMode='1' :goodsShowPos='0' v-model="showSkuPopup"
			:goods="goodsType == 1 ? goodsDetail:recGoodsDetail" ref="skuModal"></sku-modal>
		<!-- 分享弹窗 -->
		<share-popup :showModal="showShareModal" @close='close' @toShare='getPoster'></share-popup>
		<share-poster :showPosterModal='showPosterModal' @close='close' :shareGoodsItem='goodsDetail'></share-poster>
	</view>
</template>

<script>
	const app = getApp();
	import smallGoodsItem from '@/components/small-goods-item/small-goods-item.vue';
	import skuModal from '@/components/sku-modal/sku-modal.vue';
	import splicePrice from '../../../utils/splicePrice';
	import commentItem from '../../../components/comment-item/comment-item.vue';
	import sharePopup from '../../../components/share-popup/share-popup.vue';
	import sharePoster from '../../../components/share-poster/share-poster.vue';
	import newGift from '../../../components/new-gift/new-gift.vue';
	export default {
		components: {
			smallGoodsItem,
			skuModal,
			commentItem,
			sharePopup,
			sharePoster,
			newGift
		},
		data() {
			return {
				Authorization: '',
				loadingPage: true,
				background: 'rgba(255,255,255,0)',
				color: 'rgba(0,0,0,0)',
				swiperHeight: 0,
				goodsId: '',
				goodsDetail: {
					images: []
				},
				swiperIndex: 0,
				// 显示/隐藏SKU弹窗
				showSkuPopup: false,
				recGoodsDetail: {},
				goodsType: 1, // 1-- 当前商品详情 0 --- 底部推荐商品列表
				tabList: ['评价', '详情', '推荐'],
				showShareModal: false,
				showPosterModal: false,
				headAllHeight: app.globalData.headAllHeight,
				isSticky: false, // 控制吸顶样式的状态变量
				stickyTop: 0, // 记录吸顶元素距离顶部的初始位置
				scrollTop: 0, // 记录当前的滚动位置
				navTabActiveIndex: 0,
				scrollViewId: "module0",
				fixedMoudleH: 0,
				refresherTriggered: true,
				userId: '',
				showBack: true,
				showModal: false,
				couponInfo: {},
				showCouponModal: false,
				zoomCouponClass: 'zoomIn',
			};
		},
		onLoad(option) {
			this.loadingPage = true;
			this.fixedMoudleH = this.headAllHeight + uni.upx2px(40);
			if (option.scene) {
				console.log('option.scene', option.scene)
				this.goodsId = option.scene.split('_')[0];
				app.globalData.shareUid = option.scene.split('_')[1];
				this.showBack = false;
			} else {
				console.log('分享链接进来 === 》', option)
				this.goodsId = option.goods_id ? option.goods_id : '';
				if (option.fromS == 'share') {
					this.showBack = false;
					app.globalData.shareUid = option.uid ? option.uid : '';
				}else{
					this.showBack = true;
				}
			}
			console.log('app.globalData.shareUid',app.globalData.shareUid)
		},
		onShow() {
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
			this.userId = uni.getStorageSync('UID') ? uni.getStorageSync('UID') : "";
			this.getNewGift()
			this.getGoodsDetail();
		},
		
		methods: {
			getNewGift() {
				app.globalRequest({
					api: app.getApi().home.getNewGift,
				}).then(res => {
					if (res.code == 0) {
						if (res.data.giftStatus == 1) {
							this.couponInfo = res.data.couponInfo;
							this.showModal = true;
							this.showCouponModal = true;
							this.zoomCouponClass = 'zoomIn'
						}
					}
				})
			},
			closeCouponModal() {
				app.globalRequest({
					api: app.getApi().coupon.userSaveCoupon,
					method: 'POST',
					data: {
						coupon_id: this.couponInfo.coupon_id
					}
				}).then(res => {
					if (res.code == 0) {
						this.showModal = false;
						this.zoomCouponClass = 'zoomOut';
						setTimeout(() => {
							this.showCouponModal = false;
						}, 200)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			},
			bindPageScroll(e) {
				let top = e.detail.scrollTop,
					height = this.swiperHeight,
					op = 0;
				if (top <= height) {
					op = Math.round(top / height * 100) / 100;
				} else {
					op = 1
				}
				this.background = `rgba(255,255,255,${op})`;
				this.color = `rgba(0,0,0,${op})`;
				this.scrollTop = e.detail.scrollTop; // 获取当前的滚动位置
				console.log('this.scrollTop', this.scrollTop)
				console.log('this.stickyTop', this.stickyTop)
				// 判断是否吸顶：如果滚动位置大于等于吸顶元素距离顶部的位置，则认为已吸顶
				if (this.scrollTop >= this.stickyTop) {
					this.isSticky = true;
				} else {
					this.isSticky = false;
				}
			},
			bindPullDownRefresh() {
				this.refresherTriggered = true;
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.getGoodsDetail();
				setTimeout(() => {
					this.refresherTriggered = false;
				}, 100)
			},
			switchTabScroll() {
				const tabList = this.tabList;
				for (let i = 0; i < tabList.length; i++) {
					this._observer = uni.createIntersectionObserver(this);
					this._observer.relativeTo(".fixedModule").observe('#module' + i, (res) => {
						if (res.intersectionRatio > 0) {
							this.navTabActiveIndex = i;
						}
					});
				}
			},
			changeActiIndex(index) {
				let that = this,
					tabList = that.tabList,
					scrollViewId = that.scrollViewId,
					i = index;
				that.scrollViewId = `module${i}`;
				console.log('scrollViewId', that.scrollViewId)
			},
			toCommentDetail() {
				uni.navigateTo({
					url: `/pages/goods-page/comment/comment?goods_id=${this.goodsId}`
				})
			},
			/* 
			 *getGoodsDetail() 获取商品详情
			 * setSwiperH() 获取swiper的高度
			 * swipeBanner() 轮播touch事件
			 * toGoodsDetail 跳转商品详情
			 * toHome 跳转首页
			 * toCollect 收藏
			 * toCart 购物车
			 * addCartSkuModal 底部推荐商品列表 点击购物车弹出sku弹窗
			 */
			getGoodsDetail() {
				let that = this;
				app.globalRequest({
					api: app.getApi().goods.goodsDetail,
					data: {
						goods_id: this.goodsId
					}
				}).then(res => {
					this.loadingPage = false;
					if (res.code == 0) {
						res.data.priceObj = splicePrice(res.data.goods_price_min)
						if (res.data.commentList) {
							if(res.data.commentList.picture.length > 0){
								res.data.commentList.picture = res.data.commentList.picture.split('|');
							}
						}
						console.log('res.data.commentList.picture', res.data.commentList.picture)
						if (!res.data.rel_goods_id) {
							this.tabList = ['评价', '详情']
						}
						res.data.poster = '';
						this.goodsDetail = res.data;
						this.$nextTick(() => {
							this.setSwiperH()
							uni.createSelectorQuery().select('.center-tab-con').boundingClientRect(
								function(rect) {
									that.stickyTop = rect.top - that.headAllHeight;
								}).exec();
							this.switchTabScroll()
						})

					} else if (res.code == 10028) {

					}
				})
			},
			swipeBanner(e) {
				if (e.detail.source == "touch" || e.detail.source == "autoplay") {
					this.swiperIndex = e.detail.current
				}
			},
			toShare() {
				this.showShareModal = true;
			},
			getPoster() {
				let goodsDetail = this.goodsDetail;
				if (!this.Authorization) {
					this.toLogin();
					return;
				}
				this.showPosterModal = true;
				this.showShareModal = false;
				app.globalRequest({
					api: app.getApi().goods.goodsShareImg,
					data: {
						goods_id: this.goodsId,
					}
				}).then(res => {
					if (res.code == 0) {
						goodsDetail.poster = res.data;
						this.goodsDetail = goodsDetail;
					}
				}).catch(err => {

				})
			},
			setSwiperH() {
				const swiperH = uni.upx2px(750),
					navbarHeight = app.globalData.headAllHeight;
				// this.swiperHeight = swiperH - navbarHeight;
				this.swiperHeight = swiperH;
			},
			toGoodsDetail(id) {
				uni.redirectTo({
					url: `/pages/goods-page/goods-detail/goods-detail?goods_id=${id}`
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/tab-page/index/index'
				})
			},
			toCollect() {
				if (!this.Authorization) {
					this.toLogin()
					return;
				}
				app.globalRequest({
					api: app.getApi().goods.saveUserCollect,
					method: 'POST',
					data: {
						goods_id: this.goodsId
					}
				}).then(res => {
					this.loadingPage = false;
					if (res.code == 0) {
						this.goodsDetail.collect_flag = this.goodsDetail.collect_flag == 0 ? 1 : 0;
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			toCart() {
				if (!this.Authorization) {
					this.toLogin()
					return;
				}
				uni.switchTab({
					url: '/pages/tab-page/cart/cart'
				})
			},
			/**
			 * 显示/隐藏SKU弹窗
			 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			 */
			onShowSkuPopup() {
				if (!this.Authorization) {
					this.toLogin()
					return;
				}
				this.goodsType = 1;
				this.$refs.skuModal.toShowSkuPopup()
			},
			addCartSkuModal(obj) {
				this.goodsType = 0;
				this.recGoodsDetail = obj;
				this.$refs.skuModal.toShowSkuPopup()
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login-page/login/login'
				})
			},
			close() {
				this.showShareModal = false;
				this.showPosterModal = false;
			},
			toHome(){
				uni.switchTab({
					url:'/pages/tab-page/index/index'
				})
			}
		},
		onShareAppMessage(res) {
			let path, title, imageUrl;
			path = `/pages/goods-page/goods-detail/goods-detail?goods_id=${this.goodsId}&fromS=share&uid=${this.userId}`;
			title = this.goodsDetail.goods_name;
			imageUrl = this.goodsDetail.goods_image;
			return {
				path,
				title,
				imageUrl
			}
		},
		onShareTimeline() {
			return {
				title: this.goodsDetail.goods_name,
				query: `goods_id=${this.goodsId}&fromS=share&uid=${this.userId}`,
				imageUrl: this.goodsDetail.goods_image
			};
		},
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.main-con {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
	}

	.main {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.top-blank {
		position: relative;
		width: 100%;
	}

	.wrap {
		padding-bottom: 200rpx;
	}

	.goods-nav-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		transition: background linear 0.3s;

		.goods-back {
			width: 58rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.7);
			border: 1rpx solid #eee;
			border-radius: 100%;
			box-sizing: border-box;
		}

		.nav-title {
			width: 300rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			transition: color linear 0.3s;
		}

	}

	.swiper-main {
		width: 100%;
		height: 750rpx;
	}

	.swiper-wrap {
		width: 100%;
		height: 750rpx;
		position: absolute;
		left: 0;
		top: 0;

		.swiper-con,
		swiper-item,
		.img {
			width: 100%;
			height: 100%;
		}

		.swiper-dots {
			width: 62rpx;
			height: 32rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 4rpx;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			right: 24rpx;
			bottom: 60rpx;
		}
	}

	.base-wrap {
		margin: 0rpx 24rpx 0;
		padding: 24rpx;
		// background: red;
		background: #FFFFFF;
		border-radius: 24rpx;

		.title {
			font-size: 32rpx;
		}
	}

	.goods-detail {
		margin: 24rpx 24rpx 0;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-top: 24rpx;

		.title {
			font-size: 32rpx;
			padding: 0 24rpx;
		}
	}

	.goods-info {
		margin-top: 24rpx;

		.goods-price-wrap {
			display: flex;
			align-items: baseline;
			padding-top: 10rpx;

			.goods-price {
				font-size: 54rpx;
				// background: #AFB0B2;
				color: #FF5040;
				/* line-height: 64rpx; */
				margin-right: 18rpx;

				text {
					font-size: 36rpx;
				}

				.goods-unit {
					font-size: 24rpx;
					color: #AFB0B2;
				}
			}

			.goods-price-line {
				font-size: 26rpx;
				color: #AFB0B2;
				text-decoration: line-through;

				text {
					font-size: 24rpx;
				}
			}
		}

		.goods-name-wrap {
			font-weight: bold;
			font-size: 34rpx;
			line-height: 48rpx;
		}
	}

	.goods-set-img {
		width: 702rpx;
		height: 88rpx;
		margin: 24rpx auto 0;
		background: linear-gradient(180deg, #FFECEB 0%, #FFFBFB 100%);
		border-radius: 16rpx;

		padding: 10rpx 12rpx 0;
		box-sizing: border-box;

		.goods-set-con {
			display: flex;
			align-items: center;
		}

		.share-icon {
			width: 32rpx;
			height: 32rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			font-size: 24rpx;
			flex: 1;
			padding-left: 12rpx;
		}

		.share {
			width: 128rpx;
			height: 40rpx;
			background: linear-gradient(90deg, #FB3255 0%, #F96A37 100%);
			border-radius: 20rpx;
			color: #fff;
			font-size: 24rpx;
		}

	}

	.goods-set {
		margin-top: -30rpx;
		position: relative;
		z-index: 2;

		.goods-set-item {
			justify-content: space-between;
			margin-bottom: 36rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			label {
				color: #AFB0B2;
				padding-right: 24rpx;
			}

			.goods-set-item-right {
				flex: 1;
			}
		}
	}

	.center-tab-con {
		width: 100%;
		height: 80rpx;
		background: #F9FBFC;
	}

	.center-tab {
		width: 100%;
		height: 80rpx;
		// background: #F9FBFC;
		padding: 0 138rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-weight: bold;

		.center-tab-item-act {
			color: #FF5040;
		}
	}

	.sticky-active {
		width: 100%;
		height: 80rpx;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 99;
	}

	.fixedModule {
		position: fixed;
		width: 100%;
		height: 80rpx;
		left: 0;
		// z-index: 10;
		// top: 0;
	}


	.comment-wrap {
		.comment-title {
			display: flex;
			justify-content: space-between;

			.comment-title-left {
				font-size: 32rpx;

				text {
					font-size: 24rpx;
					color: #7D7E80;
					padding-left: 18rpx;
				}
			}

			.comment-all {
				font-size: 24rpx;
				color: #7D7E80;
				display: flex;
				align-items: center;
			}

		}

		.comment-con {
			margin-top: 44rpx;
		}
	}

	.goods-detail {
		.base-title {
			font-size: 32rpx;
			padding: 0 24rpx;
		}
	}

	.base-title {
		font-size: 32rpx;
	}

	.relation-goods-wrap {
		margin-top: 24rpx;
	}

	.uv-content {
		margin-top: 18rpx;
		padding-bottom: 24rpx;
	}

	.base-goods-wrap {
		padding-bottom: 0;
		// margin: 0 24rpx;
	}

	.base-goods-wrap {
		// padding:0 24rpx;
		// width: 100%;
		margin-top: 32rpx;
		padding-bottom: 20rpx;
		display: grid;
		grid-template-columns: repeat(3, 202rpx);
		justify-content: space-between;
		gap: 24rpx;
	}

	.footer-wrap {
		width: 100%;
		height: 108rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index: 99;

		.footer {
			width: 100%;
			height: 108rpx;
			padding: 0 16rpx 0 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			// justify-content: space-between;

			.handle-btn {
				width: 100rpx;

				// background: red;
				// width: 48rpx;
				.handle-icon {
					width: 48rpx;
					height: 48rpx;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.handle-text {
					width: 80rpx;
					color: #AFB0B2;
					font-size: 24rpx;
					text-align: center;
					margin: auto;
				}
			}

			.btn-con {
				display: flex;
				justify-content: space-between;
				flex: 1;

				.btn {
					width: 204rpx;
					height: 76rpx;
					border-radius: 38rpx;
					color: #fff;
				}

				.add-cart {
					background: #FFCD02;
				}

				.buy {
					background: #53B349;
				}
			}


			.add-cart-disabled {
				color: #c3c3c3;
				background: #f6f6f6;
			}
		}
	}
	.poster-modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		backdrop-filter: blur(10px);
		visibility: hidden;
		opacity: 0;
		transition: all 0.2s;
	}
	
	.modal-show {
		visibility: visible;
		opacity: 1;
	}
</style>